<template>
  <div id="zsseach">
    <van-nav-bar title="掌上搜索" />
    <!-- 搜索框组件 -->
    <div class="boxseach">
      <input type="seach"
             class="seach"
             placeholder="例如:陈赫" />
      <!-- 放大镜图片（定位到固定位置） -->
      <a href="http:www.baidu.com"><img src="@/assets/two/seach.png" class="imgseach"></a>
    </div>

    <van-tabs v-model="active"
              color="#1779ff"
              title-inactive-color="#888888"
              title-active-color="#222222">
      <van-tab title="达人">
        <TalentStar />
      </van-tab>
      <van-tab title="商品">
        <Goods />
      </van-tab>
      <van-tab title="直播">
        <Videoss />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TalentStar from '@/pages/home/seach/talent.vue'
import Goods from '@/pages/home/seach/goods.vue'
import videoss from '@/pages/home/seach/videoss'
export default {
  name: '',
  components: { TalentStar, Goods, videoss },
  data() {
    return {
      active: '达人',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},

  methods: {},
}
</script>
<style lang='less' scoped>
#zsseach {
  .seach {
    display: block;
    width: 92%;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 0.346667rem;
    background: #f1f1f1;
    padding: 0.266667rem 0 0.266667rem 0.4266rem;
    line-height: 0.3466rem;
    outline: 0 none;
    box-sizing: border-box;
    font-size: 0.33rem;
    color: #222;
  }
  .boxseach {
    background: #fff;
    width: 100%;
    position: relative;
    a{
          display: block;
          width:.4rem;
          height: .4rem;
          position: absolute;
          right: 8%;
          top: 34%;
    }
    .imgseach{
          display: block;
          width:100%;
    }
  }
  .van-tab {
    width: 1.066667rem !important;
  }
//   修改默认提示字体颜色
  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #222;
  }
  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #222;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #222;
  }
}
//@import url();
// 测试位
</style>